<template>
	<div>
		<headerNav></headerNav>
		<serviceIcon></serviceIcon>
		<div class="productbanner">
			<div class="producttitle cbody">
				<h4>产品与服务
					<p>PRODUCTS AND SERVICES</p>
				</h4>
			</div>
		</div>
		<div class="productlist">
			<div class="cbody">
				<h4>
					<span>产品专区</span>
				</h4>
				<div class="productlists clearfix">
					<div class="productitem" v-for="(item,index) in list" :key="index">
						<img :src="item.imageUrl" />
						<p>{{item.name}}</p>
						<div class="productitem_details">
							<div class="codebox">
								 <qriously :value="item.codeurl" :size="162" :foreground="blue" :backgroundAlpha="1"/>
								<p>扫码查看详情</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="serve">
			<div class="cbody">
				<h4>
					<span>服务专区</span>
				</h4>
				<div class="servelist clearfix">
					<div class="serveitem" v-for="(item,index) in lists" :key="index" :foreground="blue">
						<img :src="item.imageUrl" />
						<p>{{item.name}}</p>
						<div class="productitem_details">
							<div class="codebox">
								 <qriously :value="item.codeurl" :size="162"/>
								<p>详情请至公众号</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footerbox></footerbox>
	</div>
</template>

<script>
	import headerNav from './template/header'
	import serviceIcon from './template/service'
	import footerbox from './template/footer'
	import api from '../../api/loginApi'
	export default{
		data(){
			return{
				pageNo:1,
				pageSize:10000,
				list:[],
				lists:[],
				blue:'#222222'
			}
		},
		components:{
			headerNav,
			serviceIcon,
			footerbox,
		},
		methods:{
			//团购列表
			Info(){
				let par = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type:1
				}
				api.getGoodsList(par,(res)=>{
					if(res.code == 0){
						this.list =res.data
						for(let i=0;i<this.list.length;i++){
							// this.list[i].codeurl = "http://test.yuan-cun.com/#/goodsDetails?goodsCommonId="+ this.list[i].goodsCommonId + '&shareType='+ '1'
							this.list[i].codeurl = "http://wap.yuan-cun.com/#/goodsDetails?goodsCommonId="+ this.list[i].goodsCommonId + '&shareType='+ '1'
						}
					}else if(res.code == 1007){
						this.list = []
					}
				})
			},
			//服务列表
			Info2(){
				let par = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type:2
				}
				api.getGoodsList(par,(res)=>{
					if(res.code == 0){
						this.lists =res.data
						for(let i=0;i<this.lists.length;i++){
							// this.lists[i].codeurl = "http://test.yuan-cun.com/#/goodsDetails?goodsCommonId="+ this.lists[i].goodsCommonId + '&shareType='+ '1'
							this.lists[i].codeurl = "http://wap.yuan-cun.com/#/goodsDetails?goodsCommonId="+ this.lists[i].goodsCommonId + '&shareType='+ '1'
						}
					}else if(res.code == 1007){
						this.lists = []
					}
				})
			},
		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},
		mounted(){
			this.Info()
			this.Info2()
			window.onload=function(){
		        console.log(document.documentElement.offsetHeight)
		    }
		}
	}
</script>

<style>

	.cbody {
		width: 1280px;
		margin: 0 auto;
	}
	
	.productbanner {
		position: relative;
		background: #fff;
		/*margin-bottom: 90px;*/
	}
	
	.producttitle {
		height: 350px;
		background: url(../../../static/images/productbanner.jpg) no-repeat;
		background-size: 100%;
		/*background-attachment: fixed;*/
	}
	
	.producttitle h4 {
		font-size: 36px;
		font-family: MicrosoftYaHei;
		color: #fff;
		text-align: center;
		font-weight: normal;
		position: absolute;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		/* IE 9 */
		-webkit-transform: translate(-50%, -50%);
		/* Safari and Chrome */
		-o-transform: translate(-50%, -50%);
		/* Opera */
		-moz-transform: translate(-50%, -50%);
		/* Firefox */
	}
	
	.producttitle h4 p {
		margin: 20px 0 0 0;
	}
	
	.productlist {
		/*background: #F7F7F7;*/
		padding-top: 140px;
		padding-bottom: 50px;
	}
	
	.productlist h4 {
		font-family: MicrosoftYaHei;
		text-align: center;
		font-weight: normal;
	}
	
	.productlist h4 span {
		font-size: 24px;
		color: #222222;
		font-weight: bold;
	}
	
	.productlist h4 p {
		font-size: 24px;
		color: #222222;
		margin-top: 20px;
	}
	
	.productlist h4 span:after {
		content: "";
		display: block;
		margin: 10px auto 0;
		width: 35px;
		height: 4px;
		background: #2B89FC;
	}
	
	.productlists {
		width: 1100px;
		margin: 78px auto 0;
	}
	
	.productitem {
		width: 260px;
		height: 370px;
		margin-right: 20px;
		margin-bottom: 50px;
		float: left;
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		background: #fff;
		cursor: pointer;
		box-shadow:0px 0px 10px rgba(34,34,34,0.1);
	}
	
	.productitem:nth-child(4n) {
		margin-right: 0;
	}
	
	.productitem img {
		height: 260px;
		width: 100%;
		overflow: hidden;
	}
	
	.productitem p {
		font-size: 18px;
		color: #222222;
		margin-top: 20px;
		text-align: center;
		/*max-height:2.5em ;
		overflow: hidden;*/
		padding: 0 1em;
		white-space:nowrap;
		overflow: hidden;
		text-overflow:ellipsis;
	}
	
	.productitem:hover .productitem_details {
		transform: translate(0, 0);
	}
	
	.productitem_details {
		width: 100%;
		height: 100%;
		background: #FBAC26;
		border-radius: 4px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translate(0, -100%);
		transition: width .6s;
		-moz-transition: all .6s;
		/* Firefox 4 */
		-webkit-transition: all .6s;
		/* Safari 和 Chrome */
		-o-transition: all .6s;
		/* Opera */
	}
	
	.productitem_details .codebox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		/* IE 9 */
		-webkit-transform: translate(-50%, -50%);
		/* Safari and Chrome */
		-o-transform: translate(-50%, -50%);
		/* Opera */
		-moz-transform: translate(-50%, -50%);
		/* Firefox */
	}
	
	.productitem_details .codebox img {
		width: 162px;
		height: 162px;
	}
	
	.productitem_details .codebox p {
		font-size: 18px;
		color: #fff;
		text-align: center;
	}
	
	.serve {
		padding: 80px 0;
		margin-bottom: 100px;
		background: #F7F7F7;
	}
	
	.serve h4 {
		font-family: MicrosoftYaHei;
		text-align: center;
		font-weight: normal;
	}
	
	.serve h4 span {
		font-size: 24px;
		color: #222222;
		font-weight: bold;
	}
	
	.serve h4 p {
		font-size: 24px;
		color: #222222;
		margin-top: 20px;
	}
	
	.serve h4 span:after {
		content: "";
		display: block;
		margin: 10px auto 0;
		width: 35px;
		height: 4px;
		background: #2B89FC;
	}
	
	.servelist {
		/*margin-top: 127px;*/
		/*text-align: center;*/
		width: 1190px;
		margin: 80px auto 0;
	}
	
	.serveitem {
		width: 382px;
		height: 404px;
		margin-right: 20px;
		margin-bottom: 20px;
		float: left;
		/*display: inline-block;
		vertical-align: top;*/
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		background: #fff;
		transition: all .6s;
		-moz-transition: all .6s;
		/* Firefox 4 */
		-webkit-transition: all .6s;
		/* Safari 和 Chrome */
		-o-transition: all .6s;
		/* Opera */
		cursor: pointer;
	}
	
	.serveitem:nth-child(3n) {
		margin-right: 0;
	}
	.serveitem:hover .productitem_details {
		transform: translate(0, 0);
	}
	
	.serveitem .productitem_details {
		width: 100%;
		height: 100%;
		background: #FBAC26;
		border-radius: 4px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translate(0, -100%);
		transition: all .6s;
		-moz-transition: all .6s;
		/* Firefox 4 */
		-webkit-transition: all .6s;
		/* Safari 和 Chrome */
		-o-transition: all .6s;
		/* Opera */
	}
	
	.serveitem .productitem_details .codebox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		/* IE 9 */
		-webkit-transform: translate(-50%, -50%);
		/* Safari and Chrome */
		-o-transform: translate(-50%, -50%);
		/* Opera */
		-moz-transform: translate(-50%, -50%);
		/* Firefox */
	}
	
	.serveitem .productitem_details .codebox img {
		width: 162px;
		height: 162px;
	}
	
	.serveitem .productitem_details .codebox p {
		font-size: 18px;
		color: #fff;
		text-align: center;
	}
	.serveitem img {
		height: auto;
		max-height: 294px;
		width: 382px;
		overflow: hidden;
	}
	
	.serveitem p {
		font-size: 18px;
		color: #222222;
		margin-top: 20px;
		text-align: center;
	}
	.productitem_details p{
		margin-top: 0;
	}
	.serveitem:hover {
		/*box-shadow: 0 0 10px 1px #9a9393;*/
		box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.1);
	}

</style>